<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- 输入框 -->
    <div class="input-container">
      <input
        type="text"
        placeholder="请输入内容"
        v-model="inputValue"
        @input="handleInput"
      />
      <!-- 输出的内容 -->
      <div class="output-text" v-if="displayedValue">
        <strong>{{ displayedValue }}</strong>
      </div>
      <!-- 清空按钮 -->
      <button class="clear-btn" @click="clearInput">清空</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      inputValue: '', // 用户输入的内容
      displayedValue: '', // 显示的内容
    };
  },
  methods: {
    // 实时输入处理
    handleInput() {
      this.displayedValue = this.inputValue; // 实时同步输入内容到显示区域
    },
    // 清空按钮点击处理
    clearInput() {
      this.inputValue = ''; // 清空输入框内容
      this.displayedValue = ''; // 清空显示内容
    }
  }
};
</script>

<style scoped>
.hello {
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

.input-container {
  position: relative;
  display: inline-block;
  width: 300px;
}

input {
  padding: 8px 16px;
  font-size: 16px;
  width: 100%;
  border: 2px solid #42b983;
  outline: none;
}

.output-text {
  margin-top: 10px; /* 输出内容与输入框的间距 */
  font-size: 18px;
  font-weight: bold;
  min-height: 20px; /* 确保即使没有内容也有一定的高度 */
}

.clear-btn {
  margin-top: 10px; /* 清空按钮与输出内容的间距 */
  padding: 8px 16px;
  font-size: 16px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}

.clear-btn:hover {
  background-color: #34a178;
}
</style>